@use "~/styles/variables.scss" as *;
.chat-page {
  max-height: 100vh;
  &.is-night {
    background: #000000;
    .text-color {
      color: #ffffff;
    }
    .card-ground-color {
      background: #25283b;
    }
    .left {
      .triangle {
        color: #25283b;
      }
    }
    .placeholder-style {
      color: #ffffff;
    }
  }
  &.is-day {
    background: #f1f1f1;
    .text-color {
      color: #000000;
    }
    .card-ground-color {
      background: #ffffff;
    }
    .left {
      .triangle {
        color: #ffffff;
      }
    }
    .placeholder-style {
      color: #000000;
    }
  }
  .right {
    .triangle {
      color: #89d961;
    }
  }
  .page-body {
    width: 750rpx;
    box-sizing: border-box;
    .chat-no-more {
      opacity: 0.5;
      text-align: center;
      padding: 10rpx;
      transform: rotate(180deg);
      flex-shrink: 0;
    }
    .chat-list {
      position: relative;
      width: 100vw;
      padding: 0;
      box-sizing: border-box;
      transform: rotate(180deg);
      .body-top {
        padding: 25rpx 0;
      }
      .chat-item {
        padding: 20rpx 25rpx;
        line-height: 64rpx;
        align-items: flex-end;
        box-sizing: border-box;
        &:first-child {
          margin-top: 35rpx;
        }
        .chat-avatar-img {
          width: 84rpx;
          height: 84rpx;
          border-radius: 8rpx;
          overflow: hidden;
          flex-shrink: 0;
          background: #ffff;
          transform: rotate(-180deg);
        }
        .bill-card {
          min-width: 400rpx;
          padding-bottom: 15rpx !important;
          .title {
            font-weight: 500;
            margin-bottom: 5rpx;
            .iconfont {
              position: relative;
              left: 20rpx;
              padding: 0 20rpx;
            }
          }
        }
        .content {
          border-radius: 8rpx;
          padding: 20rpx;
          line-height: 40rpx;
          margin: 0 20rpx;
          flex-grow: 0;
          position: relative;
          transform: rotate(-180deg);
          .add-time {
            position: absolute;
            right: 2rpx;
            bottom: -35rpx;
          }
          .card-body {
            .info-item {
              line-height: 34rpx;
              padding: 5rpx 0;
              .iconfont {
                padding-right: 10rpx;
              }
              .icon-btn {
                padding: 5rpx 30rpx;
                position: relative;
                right: -30rpx;
                color: $color-primary;
              }
            }
          }
          .amount {
            font-weight: bold;
            color: #f635a8;
          }
          .income {
            color: #3c88ff;
          }
          .triangle {
            height: 6rpx;
            width: 6rpx;
            position: absolute;
          }
          .dot {
            font-weight: bolder;
            margin-left: 5rpx;
            font-size: 50rpx;
            animation: load 1.04s ease infinite;
          }
          @keyframes load{
            0%{
              opacity: 1;
            }
            100%{
              opacity: 0;
            }
          }
          .dot:nth-child(1){
            animation-delay:0.13s;
          }
          .dot:nth-child(2){
            animation-delay:0.26s;
          }
          .dot:nth-child(3){
            animation-delay:0.39s;
          }
        }
        .left {
          .triangle {
            top: 20rpx;
            transform: rotate(90deg);
            left: 10rpx;
          }
        }
        .right {
          background: #89d961;
          min-width: 150rpx;
          .triangle {
            top: 40rpx;
            transform: rotate(-90deg);
            right: 10rpx;
          }
        }
      }
    }
    .page-bottom-container {
      width: 100%;
    }
    .input-box {
      width: 100%;
      padding: 0 25rpx;
      box-sizing: border-box;
      .input {
        border: 2rpx solid #eeeeee;
        padding: 0 20rpx;
        border-radius: 34rpx;
        height: 70rpx;
      }
      .iconfont {
        font-size: 60rpx;
        padding: 25rpx;
        position: relative;
      }
      .submit-btn {
        height: 70rpx;
        border-radius: 35rpx;
        padding: 10rpx 25rpx;
        box-sizing: border-box;
        background-color: red;
        margin: 10rpx 10rpx 10rpx 25rpx;
        .btn-text {
          color: #ffffff;
        }
      }
    }
  }
}